<template>
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="val.window_open"
    :title="`更改招募信息 -> ${val.data?.guild_name}`"
  >
    <template #content>
      <n-spin :show="val.subdb">
        <div class="model" ref="model">
          <div class="_box0">
            更改信息后刷新招募时间，有效期设置为[七天]则[七天]后停止展示招募。
          </div>
          <div class="_box0">
            <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>公会名称：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.data.guild_name"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>公会区服：</div>
                  </div>
                  <div class="_2_val">
                    <n-select
                      :size="cfg.sizebtn"
                      v-model:value="val.data.sv"
                      :options="val.tab_sv"
                      :to="`body`"
                    />
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>公会排名：</div>
                  </div>
                  <div class="_2_val">
                    <n-input-number
                      placeholder="10"
                      :size="cfg.sizebtn"
                      v-model:value="val.data.top"
                      :show-button="false"
                    >
                      <template #suffix>名</template>
                    </n-input-number>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>招募有效期：</div>
                  </div>
                  <div class="_2_val">
                    <n-select
                      :size="cfg.sizebtn"
                      placeholder="请选择日期，过期自动隐藏招募信息。"
                      v-model:value="val.data.settime"
                      :options="val.time"
                      :to="`body`"
                    />
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>伤害要求：</div>
                  </div>
                  <div class="_2_val">
                    <n-input-number
                      placeholder="不需要留空 单位亿 1.11"
                      :size="cfg.sizebtn"
                      v-model:value="val.data.dmg_E"
                      :show-button="false"
                    >
                      <template #suffix>亿</template>
                    </n-input-number>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>联系方式：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      placeholder="请填写wx号 或 qq群 或 QQ号"
                      :size="cfg.sizebtn"
                      v-model:value="val.data.contact"
                    >
                    </n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>公会标签：</div>
                  </div>
                  <div class="_2_val">
                    <n-select
                      placeholder="不需要可留空"
                      :to="`body`"
                      v-model:value="val.data.tag"
                      :size="cfg.sizebtn"
                      :max-tag-count="1"
                      :options="val.tab_if"
                      multiple
                    />
                  </div>
                </div>
              </n-gi>
            </n-grid>
          </div>

          <div class="_box0">
            <n-grid x-gap="8" y-gap="8" :cols="2">
              <n-gi span="2">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>招募内容：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      type="textarea"
                      v-model:value="val.data.text"
                      placeholder="不需要可留空，禁止填写无关内容"
                      :size="cfg.sizebtn"
                      :autosize="{
                        minRows: 2,
                      }"
                    />
                  </div>
                </div>
              </n-gi>
              <n-gi span="2">
                <div class="_banr">
                  <div class="_2_title2" style="width: 85px">
                    <div>招募图片：</div>
                  </div>
                  <div class="_2_val">
                    <n-upload
                      multiple
                      directory-dnd
                      list-type="image-card"
                      :action="`https://gtimg.ww2.ren/upload.php?type=recruit&authkey=${cfg.user?.authkey}&uid=${cfg.user?.uid}`"
                      @finish="ct.imgfin"
                      @remove="ct.imgremove"
                      v-model:file-list="val.data.sendlist"
                      :max="3"
                    >
                      <n-upload-dragger> 上传图片 </n-upload-dragger>
                    </n-upload>
                  </div>
                </div>
              </n-gi>
            </n-grid>
          </div>
        </div>
      </n-spin>
    </template>
    <template #footer>
      <n-button type="gt_y" :disabled="val.subdb" :size="cfg.sizebtn" @click="ct.submit"
        >更改信息</n-button
      >
    </template>
  </component>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
import { tab } from "./gselect.js";

export default defineComponent({
  props: {
    window_open: Boolean,
    id: String,
  },
  setup(props, { emit }) {
    const model = ref(null);
    const id = props.id;
    let val = reactive({
      window_open: false,
      data: {},
      subdb: false,
      ...tab,
    });
    let ct = {
      test: () => {
        alert();
      },
      //更新信息提交
      submit: async () => {
        val.subdb = true;
        const sl = val.data;
        let res = await cfg.axios.post(`${cfg.url}`, sl, {
          params: {
            t: "v2/get",
            t2: "introduction/recruit",
            t3: "upd_guild",
            authkey: cfg.user?.authkey,
            uid: cfg.user?.uid,
          },
        });
        res = res.data;
        if (res.code == -1) {
          cfg.msg.error(res.msg);
          val.subdb = false;
          return;
        } else {
          val.subdb = false;
          val.window_open = false;
          cfg.msg.success(res.msg);
          res.type = "gupd";
          emit("event-refresh");
          emit("event-new", res);
        }
      },
      //图片上传完成回调函数
      imgfin: ({ file, event }) => {
        try {
          event = JSON.parse(event?.target?.response);
          file.name = event.data.id;
          //使用name存储ID
          return file;
        } catch (error) {
          alert("上传失败" + error);
        }
      },
      //图片删除回调函数
      imgremove: async ({ file, event }) => {
        try {
          if (file?.mt == "svimg") {
          } else {
            let res = await cfg.axios.get(`https://gtimg.ww2.ren/upload.php`, {
              params: {
                authkey: cfg.user?.authkey,
                uid: cfg.user?.uid,
                type: "delete",
                fileid: file.name,
              },
            });
            //不需要返回数据 直接删除即可
            return true;
          }
        } catch (error) {
          cfg.msg.error(error);
          return false;
        }
      },
      load: async (id) => {
        try {
          let res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/get",
              t2: "introduction/recruit",
              t3: "load_guild_find",
              authkey: cfg.user?.authkey,
              uid: cfg.user?.uid,
              id: id,
            },
          });
          if (res.data?.code == 0) {
            //浅拷贝
            val.data = { ...res.data.data };
            return;
          } else {
            cfg.msg.error(res.data?.msg);
            return;
          }
          return;
        } catch (error) {
          cfg.msg.error(error);
        }
      },
    };
    watch(
      () => val.window_open,
      (newVal) => {
        if (!newVal) {
          setTimeout(() => {
            emit("update:window_open", false);
          }, 250);
        }
      }
    );

    onMounted(() => {
      val.window_open = true;
      ct.load(id);
    });

    return {
      cfg,
      props,
      ct,
      val,
      model,
    };
  },
});
</script>
